<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <span>个人资料</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="changefather('set')"
        >编辑资料</el-button>
      </div>
      <div class="card-item row-tel">
        <i class="el-icon-user"></i>
        <span>{{userInfo.userName}}</span>
      </div>
      <div class="card-item row-sex">
        <i class="el-icon-female"></i>
        <span class="sex">女</span>
        <span>21岁</span>
      </div>
      <div class="card-item row-point">
        <i class="el-icon-s-data"></i>
        经验值：
        <span>{{userInfo.userPoint}}</span>
      </div>
      <div class="card-item row-num">
        <section @click="changefather('mycomment')">
          <span>评论数</span>
          <span>0</span>
        </section>
        <section @click="changefather('myfan')">
          <span>粉丝数</span>
          <span>{{userInfo.fansNum}}</span>
        </section>
        <section @click="changefather('myconcern')">
          <span>关注数</span>
          <span>{{userInfo.focusNum}}</span>
        </section>
        <!-- <section @click="changefather('mymenu')">
          <span>发布菜谱数</span>
          <span>0</span>
        </section>
        <section @click="changefather('mynote')">
          <span>发布笔记数</span>
          <span>{{userInfo.myMenu}}</span>
        </section>
        <section @click="changefather('collectmenu')">
          <span>收藏菜谱数</span>
          <span>0</span>
        </section>
        <section @click="changefather('collectnote')">
          <span>收藏笔记数</span>
          <span>0</span>
        </section>-->
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {}
    };
  },
  methods: {
    changefather(p1) {
      this.$parent.changesoncom(p1);
    }
  },
  mounted() {
    this.$axios
      .get("/api/users/getUserInfo")
      .then(res => {
        this.userInfo = res.data.data[0];
        console.log("Duserinfo获取成功", res);
      })
      .catch(err => {
        console.log("Duserinfo获取失败", err);
      });
  }
};
</script>

<style scoped lang='scss'>
/deep/.box-card {
  border-radius: 10px;
  width: 100%;
  background-color: #fff;
  // opacity: 0.8;
  /deep/.el-button {
    color: #e6a23c;
  }
  /deep/.el-button:hover {
    color: #e6a23c;
    opacity: 0.7;
  }
  .card-item {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 20px 0;
    letter-spacing: 0.04em;
    .sex {
      margin-right: 12px;
    }
  }
  .row-num {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 360px;
    border-radius: 10px;
    // border: 2px double rgb(234, 247, 242);
    box-shadow: 0 0 6px rgb(234, 247, 242);
    section {
      width: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #e6a23c;
      border-left: 2px solid #ccc;
    }
    section:nth-child(1) {
      border: none;
    }
    section:hover {
      color: #e6a23c;
      opacity: 0.7;
    }
  }
}
</style>